<template>
  <div id="cesium-viewer" ref="viewerDivRef"></div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import *as { TileMapServiceImageryProvider, Viewer } from 'cesium';

  const viewerDivRef = ref<HTMLDivElement>();

  onMounted(() => {
    new Viewer(viewerDivRef.value as HTMLElement, {
      imageryProvider: new TileMapServiceImageryProvider({
        url: 'node_modules/cesium/Build/CesiumUnminified/Assets/Textures/NaturalEarthII',
      }),
    });
  });
</script>

<style scoped>
  #cesium-viewer {
    width: 100%;
    height: 100%;
  }
</style>
